<template>
  <div class="navbar-container">
    <div class="logo flex-center">
      <i>众联</i>
    </div>
    <!-- 动态菜单 -->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      @select="handleSelect"
      background-color="#409eff"
      text-color="#fff"
      active-text-color="#ffd04b"
      :collapse="menuStore.isCollapse"
    >
      <TMenu
        v-for="item in proMenuListData"
        :menu="item"
        :key="item.id"
      ></TMenu>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useMenuStore } from "../../store/index";
import TMenu from "./components/TMenu.vue";

const menuStore = useMenuStore();
const activeIndex = ref("01");
const proMenuListData = ref([]);
const menuList = ref([]);

// 选择菜单
const handleSelect = (key: string) => {
  activeIndex.value = key;
  console.log(key, activeIndex.value);
};

// 将menuList处理成树形结构,处理好的数据由proMenuListData接收
const proMenuList = (list: any[]) => {
  list.forEach((item) => {
    if (!item.pid) {
      proMenuListData.value.push(item);
    } else if (item.pid) {
      proMenuListData.value.forEach((item1) => {
        if (item1.id === item.pid) {
          if (!item1.children) {
            item1.children = [];
          }
          item1.children.push(item);
        }
      });
    }
  });
};

onMounted(() => {
  menuList.value = menuStore.menuList;
  proMenuList(menuList.value);
  console.log(proMenuListData.value);
});
</script>

<style lang="less">
.navbar-container {
  .logo {
    height: 60px;
    font-size: 25px;
    color: white;
    background-color: #409eff;
  }
  .el-menu-vertical-demo {
    min-height: calc(100vh - 100px);
  }
}
</style>
